import React, {useContext, useEffect, useState} from 'react';
import {Alert, View, TouchableOpacity, ImageBackground, Dimensions} from 'react-native';
import { Button, Divider, Image, ListItem, Text } from 'react-native-elements';
import QRCode from 'react-native-qrcode-svg';
import Clipboard from '@react-native-community/clipboard';
import Toast from 'react-native-simple-toast';

import LocaleContext from '../libs/locale';
import WalletContext from '../libs/wallet';
import logo from '../assets/Rlogo.png';
import {keyPairFromSeed,bytes2Hex} from "../libs/keyPair";
import Cp from "crypto-js";

const {width,height,scale} = Dimensions.get("window");

const ChatGroupQRcode = ({ navigation,route }: any) => {
    const locale: any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const NewTiTle = "群二维码名片";
    const Q_Address = route?.params?.Q_Address;
    const Q_Key = route?.params?.Q_Key;
    const QP_Priv = route?.params?.QP_Priv;
    const Creator = route?.params?.Creator;
    const desc = route?.params?.desc;

    useEffect(() => {
        navigation.setOptions({ title: NewTiTle })
    })
    const enAESPublicKey= (date:string) => {
        var key  = Cp.enc.Utf8.parse(wallet.seed);
        var srcs = Cp.enc.Utf8.parse(date);
        var encrypted = Cp.AES.encrypt(srcs, key, {mode:Cp.mode.ECB,padding: Cp.pad.Pkcs7});
        let res =  encrypted.toString();
        return res;
    }

    //复制
    const onCopy = (data:any) => {
        Clipboard.setString(data);
        Toast.show(locale?._('copied') as string);
    };

    return (
        <View style={{ margin: 40 }}>
            <View style={{ elevation: 2, borderRadius: 8 }}>
                <View>
                    <View style={{
                        height: 54,
                        backgroundColor: '#7460E3FF',
                        borderTopLeftRadius: 8,
                        borderTopRightRadius: 8,
                    }} />
                    <View style={{
                        height: 270,
                        backgroundColor: '#FFFFFF',
                        borderBottomLeftRadius: 8,
                        borderBottomRightRadius: 8,
                    }} />
                </View>
                <View style={{ position: 'absolute', alignItems: 'center', width: '100%' }}>
                    <Text style={{
                        fontWeight: 'bold',
                        fontSize: 18,
                        color: '#FFFFFF',
                        marginVertical: 6,
                    }}>Message</Text>
                    <View style={{ backgroundColor: '#E7E3FFFF', borderRadius: 46, marginBottom: 20 }}>
                        <ImageBackground source={logo} style={{ width: 46, height: 46 }} />
                    </View>
                    <QRCode value={JSON.stringify({Creator:Creator,desc:desc,addressOut:Q_Address,Key:Q_Key,Voucher:enAESPublicKey(QP_Priv)})} size={140} />
                    <Text style={{
                        marginTop: 20,
                        fontWeight: 'bold',
                        color: '#333333FF',
                        width: width*0.6,
                        textAlign: 'center'
                    }}>{Q_Address}</Text>
                    <Text style={{
                        marginTop: 6,
                        fontWeight: 'bold',
                        color: 'grey',
                        width: width*0.8,
                        textAlign: 'center',
                        fontSize:10
                    }}>欢迎加入群聊，来跟我们一起聊天吧</Text>
                </View>
            </View>
            <View style={{  marginTop: 40, alignItems:'center' }}>
                <Button
                    title={locale?._('copy')}
                    onPress={()=>onCopy(JSON.stringify({Creator:Creator,desc:desc,addressOut:Q_Address,Key:Q_Key,Voucher:enAESPublicKey(QP_Priv)}))}
                    buttonStyle={{ backgroundColor: '#7460E3FF' }}
                />
            </View>
        </View>
    );
};

export default ChatGroupQRcode;
